<template>
  <div>
    <Row>
      <i-col span="24">
        <Card>
          <p slot="title">
            <Icon type="stats-bars"></Icon>
            雇主「{{info?info.companyName:''}}」 - 配置详情
          </p>
          <a href="javascript:void(0)" slot="extra">
            <Button type="primary" size="small" @click="goBack">
              返回
            </Button>
          </a>
          <div>
            <Row>
              <Divider orientation="left">基础配置</Divider>
              <i-col>
                <Form :label-width="200">
                  <FormItem label="体检权限">
                    <CheckboxGroup v-model="formItem.menus" @on-change="rootChange">
                      <Checkbox v-for="item in roots" :key="item.value" :label="item.value">{{item.label}}</Checkbox>
                    </CheckboxGroup>
                  </FormItem>
                </Form>
              </i-col>
              <i-col :span="span">
                <Form :label-width="200">
                  <FormItem label="最小提前天数">
                    <i-input v-model="formItem.appMin"></i-input>
                  </FormItem>
                  <FormItem label="最大提前天数">
                    <i-input v-model="formItem.appMax"></i-input>
                  </FormItem>
                </Form>
              </i-col>
              <i-col :span="span">
                <Form :label-width="200">
                  <FormItem label="最小提前取消天数">
                    <i-input v-model="formItem.calMin"></i-input>
                  </FormItem>
                </Form>
              </i-col>
            </Row>
            <Row>
              <Divider orientation="left">PC</Divider>
              <i-col :span="span">
                <Form :label-width="200">
                  <FormItem label="首页配图地址（CN）">
                    <i-input v-model="formItem.homePicPath_PC_CN">
                      <Button slot="append" icon="md-expand" @click="viewPic(formItem.homePicPath_PC_CN)"></Button>
                    </i-input>
                  </FormItem>
                </Form>
              </i-col>
              <i-col :span="span">
                <Form :label-width="200">
                  <FormItem label="首页配图地址（En）">
                    <i-input v-model="formItem.homePicPath_PC_EN">
                      <Button slot="append" icon="md-expand" @click="viewPic(formItem.homePicPath_PC_EN)"></Button>
                    </i-input>
                  </FormItem>
                </Form>
              </i-col>
              <Divider orientation="left">H5</Divider>
              <i-col :span="span">
                <Form :label-width="200">
                  <FormItem label="首页配图地址（CN）">
                    <i-input v-model="formItem.homePicPath_H5_CN">
                      <Button slot="append" icon="md-expand" @click="viewPic(formItem.homePicPath_H5_CN)"></Button>
                    </i-input>
                  </FormItem>
                </Form>
              </i-col>
              <i-col :span="span">
                <Form :label-width="200">
                  <FormItem label="首页配图地址（En）">
                    <i-input v-model="formItem.homePicPath_H5_EN">
                      <Button slot="append" icon="md-expand" @click="viewPic(formItem.homePicPath_H5_EN)"></Button>
                    </i-input>
                  </FormItem>
                </Form>
              </i-col>
            </Row>
            <Row>
              <Divider orientation="left">个人中心配置</Divider>
              <i-col :span="span">
                <Form :label-width="200">
                  <FormItem label="注意事项配置（En）">
                    <i-input v-model="formItem.noticePath_CN"></i-input>
                  </FormItem>
                  <FormItem label="注意事项配置（En）">
                    <i-input v-model="formItem.noticePath_EN"></i-input>
                  </FormItem>
                  <FormItem label="FAQ配置路径（CN）">
                    <i-input v-model="formItem.FAQPath_CN"></i-input>
                  </FormItem>
                  <FormItem label="FAQ配置路径（En）">
                    <i-input v-model="formItem.FAQPath_EN"></i-input>
                  </FormItem>
                </Form>
              </i-col>
            </Row>
            <Row>
              <Divider orientation="left">提示信息配置</Divider>
              <i-col :span="span">
                <Form :label-width="200">
                  <FormItem label="预约流程温馨提示（CN）">
                    <i-input type="textarea" :rows="5" :autosize="false" v-model="formItem.sch_Reminder_CN"></i-input>
                  </FormItem>
                  <FormItem label="预约流程温馨提示（En）">
                    <i-input type="textarea" :rows="5" :autosize="false" v-model="formItem.sch_Reminder_EN"></i-input>
                  </FormItem>
                  <FormItem>
                    <Button type="primary" size="default" @click="save">保存</Button>
                    <Button type="warning" size="default" @click="clear">清除</Button>
                    <Button type="default" size="default" @click="goBack">返回</Button>
                  </FormItem>
                </Form>
              </i-col>
              <i-col :span="span">
                <Form :label-width="200">
                  <FormItem label="预约详情温馨提示（CN）">
                    <i-input type="textarea" :rows="5" :autosize="false" v-model="formItem.sched_Reminder_CN"></i-input>
                  </FormItem>
                  <FormItem label="预约详情温馨提示（En）">
                    <i-input type="textarea" :rows="5" :autosize="false" v-model="formItem.sched_Reminder_EN"></i-input>
                  </FormItem>
                </Form>
              </i-col>
            </Row>
          </div>
        </Card>
      </i-col>
    </Row>
    <a-modal :visible="previewVisible" :footer="null" @cancel="previewVisible = false;previewImage = ''">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>

<script>
  export default {
    name: "edit",
    data() {
      return {
        previewVisible: false,
        previewImage: '',
        formItem: {
          FAQPath_CN: "",
          FAQPath_EN: "",
          appMax: "",
          appMin: "",
          calMin: "",
          homePicPath_H5_CN: "",
          homePicPath_H5_EN: "",
          homePicPath_PC_CN: "",
          homePicPath_PC_EN: "",
          menus: [],
          noticePath_CN: "",
          noticePath_EN: "",
          sch_Reminder_CN: "",
          sch_Reminder_EN: "",
          sched_Reminder_CN: "",
          sched_Reminder_EN: ""
        },
        roots: [
          {
            label: '员工预约',
            value: '01'
          },
          {
            label: '家属预约',
            value: '02'
          },
          {
            label: '体检报告',
            value: '03'
          },
          {
            label: '注意事项',
            value: '04'
          },
          {
            label: '常见问题',
            value: '05'
          },
          {
            label: '团检预约',
            value: '06'
          }
        ],
        span: 8
      }
    },
    methods: {
      goBack() {
        this.$router.go(-1)
      },
      rootChange(root) {
        console.log(root)
      },
      getCompanyConfig() {
        this.$api.getCompanyConfig({
          companyId: this.info.companyId
        }).then(res => {
          if(res.data.menus){
            res.data.menus = res.data.menus.split(',');
            this.formItem = res.data;
          }
        })
      },
      save() {
        this.$Spin.show({
          render: (h) => {
            return h('div', [
              h('loading'),
            ])
          }
        });
        this.$api.insertOrUpdateConfig({
          companyId: this.info.companyId,
          FAQPath_CN: this.formItem.FAQPath_CN,
          FAQPath_EN: this.formItem.FAQPath_EN,
          appMax: this.formItem.appMax,
          appMin: this.formItem.appMin,
          calMin: this.formItem.calMin,
          homePicPath_H5_CN: this.formItem.homePicPath_H5_CN,
          homePicPath_H5_EN: this.formItem.homePicPath_H5_EN,
          homePicPath_PC_CN: this.formItem.homePicPath_PC_CN,
          homePicPath_PC_EN: this.formItem.homePicPath_PC_EN,
          menus: this.formItem.menus.join(','),
          noticePath_CN: this.formItem.noticePath_CN,
          noticePath_EN: this.formItem.noticePath_EN,
          sch_Reminder_CN: this.formItem.sch_Reminder_CN,
          sch_Reminder_EN: this.formItem.sch_Reminder_EN,
          sched_Reminder_CN: this.formItem.sched_Reminder_CN,
          sched_Reminder_EN: this.formItem.sched_Reminder_EN
        }).then(res => {
          this.$Spin.hide();
          if (res.code === 200) {
            this.$Notice.success({
              title: res.data.msg || '保存配置成功！'
            });
            this.goBack()
          }
        })
      },
      clear() {
        this.formItem = {
          FAQPath_CN: "",
          FAQPath_EN: "",
          appMax: "",
          appMin: "",
          calMin: "",
          homePicPath_H5_CN: "",
          homePicPath_H5_EN: "",
          homePicPath_PC_CN: "",
          homePicPath_PC_EN: "",
          menus: [],
          noticePath_CN: "",
          noticePath_EN: "",
          sch_Reminder_CN: "",
          sch_Reminder_EN: "",
          sched_Reminder_CN: "",
          sched_Reminder_EN: ""
        }
      },
      viewPic(url){
        if(url){
          this.previewImage = url;
          this.previewVisible = true;
        }else{
          this.$Notice.warning({
            title:'请预先填写配置图片的地址'
          })
        }
      }
    },
    mounted() {
      this.info = this.$route.query;
      this.getCompanyConfig()
    }
  }
</script>

<style scoped>

</style>
